Prop Drilling
Reactで、2階層以上離れたコンポーネント間でデータの受け渡しを行う際、間のコンポーネントが受け取ったpropsをそのまま子に渡すだけしかしていないこと それを揶揄した表現
回避策
PropTypes
React < 16.3
childContextTypes、getChildContext、contextTypes
Context API
React >= 16.3
code:jsx
import React, { createContext } from "react";
const Context = createContext()
export const { Provider, Consumer } = Context
親:Providerに、状態 (state)と状態を変更するメソッド(actions)を定義
孫:Consumer内で、stateやactionsを受け取る
React >= 16.8
code:js
const Grandchild = () => {
const context = useContext(上位の階層で作ったContext);
return <div>context.value</div>
}
Consumerの代わりに、useContextを使う
上位の階層でProviderは必要
大規模なstateを管理できる